<script lang="ts" setup>

export interface menu {
  id: string,
  menuName: string,
  path?: string,
  sub?: menu[]
}

defineProps({
  menus: {
    type: Array as () => menu[]
  }
})

</script>

<template>
  <template v-for="(item, index) in menus">
    <el-sub-menu v-if="item.sub" :key="index" :index="item.id">
      <template #title>{{ item.menuName }}</template>
      <MenuList :menus="item.sub"></MenuList>
    </el-sub-menu>
    <el-menu-item v-else :key="index + 1" :index="item.id" :route="item.path">
      <span>{{ item.menuName }}</span>
    </el-menu-item>
  </template>
</template>

<style scoped>
</style>